<template>
  <div class="right-card-3">
    <HeaderTitle :imgUrl="`earlyWarning-img`" />

    <div class="card-body">
      <el-table
        :data="tableData"
        border
        stripe
        table-layout="fixed"
        header-row-class-name="card3-table-header-class"
        cell-class-name="card3-table-cell-class"
        :style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
        :header-row-style="headerRowStyle"
        :header-cell-style="headerCellStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
      >
        <el-table-column>
          <template #header>
            <div class="header-cell fx-center">行政区</div>
          </template>
          <template #default="{ row }">
            <div>{{ row.cityName }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div class="header-cell fx-center">矿区名称</div>
          </template>
          <template #default="{ row }">
            <div class="cell-ellipsis">{{ row.diggingsName }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div class="header-cell fx-center">矿产名称</div>
          </template>
          <template #default="{ row }">
            <div class="cell-ellipsis">{{ row.mineralName }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div class="header-cell fx-center">资源量</div>
          </template>
          <template #default="{ row }">
            <div class="cell-ellipsis">{{ row.sourceNum }}</div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #header>
            <div class="header-cell fx-center">变化</div>
          </template>
          <template #default="{ row }">
            <div>{{ row.offset }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
/*设置表格样式*/
function headerRowStyle({ row, rowIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    color: 'white'
  };
}
function headerCellStyle({ row, column, rowIndex, columnIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    padding: '0px',
    border: 'none'
  };
}
function rowStyle({ row, rowIndex }) {
  return {
    backgroundColor: 'rgba(0, 0, 0, 0)',
    border: 'none'
  };
}
function cellStyle({ row, column, rowIndex, columnIndex }) {
  return {
    padding: '0px',
    backgroundColor: 'rgba(0, 0, 0, 0)',
    border: 'none'
  };
}

/*矿种储量表格数据定义和获取*/
const tableData = ref([{ cityName: '', diggingsName: '', mineralName: '', sourceNum: '22678452.06', offset: '22678452.06' }]);
function getTableData() {
  axios.get('/api/getCityMineralList').then(res => {
    tableData.value = res.data?.data || [];
  });
}

onMounted(() => {
  getTableData();
});
</script>
